<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf8"/>

        <title>Basic shapes</title>

        <style>
            #paper {
                display: inline-block;
                border: 1px solid gray;
            }
        </style>
    </head>
    <body>

        <p>Drag & Drop line drawing.</p>

        <div id="paper"></div>

	<h3>How to</h3>
	<p>
	  The idea is to draw a temporary SVG path while the user is creating the
	  line by drag&amp;drop. When the user releases the mouse cursor
	  when in the line drawing mode (<code>creatingLine === true</code>),
	  we create the JointJS <code>basic.Path</code> shape based on the
	  line coordinates gathered during the drawing. The result of this
	  is a normal JointJS shapes that we can put the <code>ui.Halo</code>
	  and/or <code>ui.FreeTransform</code> control panels around.
	</p>

        <script src="../build/joint.js"></script>
        <script src="./line-draw.js"></script>

    </body>
</html>
